<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>uni-app | 川哥编程路</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/blog/image/favicon.ico">
    <link rel="stylesheet" href="/blog/css/style.css">
    <meta name="description" content="日拱一卒无有尽，功不唐捐终入海">
    
    <link rel="preload" href="/blog/assets/css/0.styles.797dfc43.css" as="style"><link rel="preload" href="/blog/assets/js/app.160d1732.js" as="script"><link rel="preload" href="/blog/assets/js/2.553eb4dc.js" as="script"><link rel="preload" href="/blog/assets/js/32.f6ddf561.js" as="script"><link rel="preload" href="/blog/assets/js/3.4c6b6694.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.33b61760.js"><link rel="prefetch" href="/blog/assets/js/11.e936ed72.js"><link rel="prefetch" href="/blog/assets/js/12.06a8905b.js"><link rel="prefetch" href="/blog/assets/js/13.43d57349.js"><link rel="prefetch" href="/blog/assets/js/14.9a947fce.js"><link rel="prefetch" href="/blog/assets/js/15.00675827.js"><link rel="prefetch" href="/blog/assets/js/16.4240201a.js"><link rel="prefetch" href="/blog/assets/js/17.4e8e9f2d.js"><link rel="prefetch" href="/blog/assets/js/18.c0804ecf.js"><link rel="prefetch" href="/blog/assets/js/19.e374c696.js"><link rel="prefetch" href="/blog/assets/js/20.dc1f2462.js"><link rel="prefetch" href="/blog/assets/js/21.2550a5e8.js"><link rel="prefetch" href="/blog/assets/js/22.64bef411.js"><link rel="prefetch" href="/blog/assets/js/23.56de7058.js"><link rel="prefetch" href="/blog/assets/js/24.7de4d292.js"><link rel="prefetch" href="/blog/assets/js/25.3483b9cb.js"><link rel="prefetch" href="/blog/assets/js/26.81508f46.js"><link rel="prefetch" href="/blog/assets/js/27.f884547d.js"><link rel="prefetch" href="/blog/assets/js/28.fc8f3edd.js"><link rel="prefetch" href="/blog/assets/js/29.6df73fc7.js"><link rel="prefetch" href="/blog/assets/js/30.92ddc0da.js"><link rel="prefetch" href="/blog/assets/js/31.bc595735.js"><link rel="prefetch" href="/blog/assets/js/33.ba353a20.js"><link rel="prefetch" href="/blog/assets/js/34.23530c8e.js"><link rel="prefetch" href="/blog/assets/js/35.98587bae.js"><link rel="prefetch" href="/blog/assets/js/4.e380c258.js"><link rel="prefetch" href="/blog/assets/js/5.9b25da44.js"><link rel="prefetch" href="/blog/assets/js/6.3d19bdbc.js"><link rel="prefetch" href="/blog/assets/js/7.b8795dc7.js"><link rel="prefetch" href="/blog/assets/js/8.9332e1e8.js"><link rel="prefetch" href="/blog/assets/js/9.875f1e10.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.797dfc43.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><!----> <span class="site-name">川哥编程路</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="php" class="dropdown-title"><span class="title">php</span> <span class="arrow down"></span></button> <button type="button" aria-label="php" class="mobile-dropdown-title"><span class="title">php</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/php/base/" class="nav-link">
  通用篇
</a></li><li class="dropdown-item"><!----> <a href="/blog/php/laravel/" class="nav-link">
  Laravel
</a></li><li class="dropdown-item"><!----> <a href="/blog/php/skill/" class="nav-link">
  技巧篇
</a></li></ul></div></div><div class="nav-item"><a href="/blog/nginx/" class="nav-link">
  nginx
</a></div><div class="nav-item"><a href="/blog/print/" class="nav-link">
  print
</a></div><div class="nav-item"><a href="/blog/mysql/" class="nav-link">
  mysql
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="web" class="dropdown-title"><span class="title">web</span> <span class="arrow down"></span></button> <button type="button" aria-label="web" class="mobile-dropdown-title"><span class="title">web</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/web/layout/" class="nav-link">
  css布局
</a></li><li class="dropdown-item"><!----> <a href="/blog/web/case/" class="nav-link">
  css实例
</a></li></ul></div></div><div class="nav-item"><a href="/blog/js/" class="nav-link">
  js
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="python" class="dropdown-title"><span class="title">python</span> <span class="arrow down"></span></button> <button type="button" aria-label="python" class="mobile-dropdown-title"><span class="title">python</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/python/base/" class="nav-link">
  python基础
</a></li><li class="dropdown-item"><!----> <a href="/blog/python/machine/" class="nav-link">
  机器学习
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Golang" class="dropdown-title"><span class="title">Golang</span> <span class="arrow down"></span></button> <button type="button" aria-label="Golang" class="mobile-dropdown-title"><span class="title">Golang</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/go/env/" class="nav-link">
  前言和环境
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/grammar/" class="nav-link">
  语法基础
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/base/" class="nav-link">
  函数和数组(切片)
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/map/" class="nav-link">
  Map,指针,值传递,引用传递
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/struct/" class="nav-link">
  结构体
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/gin/" class="nav-link">
  Gin
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/concurrent/" class="nav-link">
  go并发
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/standard/" class="nav-link">
  常用标准库
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/skills/" class="nav-link">
  技巧篇
</a></li></ul></div></div><div class="nav-item"><a href="/blog/docker/" class="nav-link">
  docker
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue" class="dropdown-title"><span class="title">vue</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue" class="mobile-dropdown-title"><span class="title">vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/vue/base/" class="nav-link">
  vue基础
</a></li><li class="dropdown-item"><!----> <a href="/blog/vue/assembly/" class="nav-link">
  组件化编程
</a></li><li class="dropdown-item"><!----> <a href="/blog/vue/problem/" class="nav-link">
  problem
</a></li><li class="dropdown-item"><!----> <a href="/blog/vue/uniApp/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  uniApp
</a></li></ul></div></div><div class="nav-item"><a href="/blog/tool/" class="nav-link">
  tool
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="php" class="dropdown-title"><span class="title">php</span> <span class="arrow down"></span></button> <button type="button" aria-label="php" class="mobile-dropdown-title"><span class="title">php</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/php/base/" class="nav-link">
  通用篇
</a></li><li class="dropdown-item"><!----> <a href="/blog/php/laravel/" class="nav-link">
  Laravel
</a></li><li class="dropdown-item"><!----> <a href="/blog/php/skill/" class="nav-link">
  技巧篇
</a></li></ul></div></div><div class="nav-item"><a href="/blog/nginx/" class="nav-link">
  nginx
</a></div><div class="nav-item"><a href="/blog/print/" class="nav-link">
  print
</a></div><div class="nav-item"><a href="/blog/mysql/" class="nav-link">
  mysql
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="web" class="dropdown-title"><span class="title">web</span> <span class="arrow down"></span></button> <button type="button" aria-label="web" class="mobile-dropdown-title"><span class="title">web</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/web/layout/" class="nav-link">
  css布局
</a></li><li class="dropdown-item"><!----> <a href="/blog/web/case/" class="nav-link">
  css实例
</a></li></ul></div></div><div class="nav-item"><a href="/blog/js/" class="nav-link">
  js
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="python" class="dropdown-title"><span class="title">python</span> <span class="arrow down"></span></button> <button type="button" aria-label="python" class="mobile-dropdown-title"><span class="title">python</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/python/base/" class="nav-link">
  python基础
</a></li><li class="dropdown-item"><!----> <a href="/blog/python/machine/" class="nav-link">
  机器学习
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Golang" class="dropdown-title"><span class="title">Golang</span> <span class="arrow down"></span></button> <button type="button" aria-label="Golang" class="mobile-dropdown-title"><span class="title">Golang</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/go/env/" class="nav-link">
  前言和环境
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/grammar/" class="nav-link">
  语法基础
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/base/" class="nav-link">
  函数和数组(切片)
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/map/" class="nav-link">
  Map,指针,值传递,引用传递
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/struct/" class="nav-link">
  结构体
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/gin/" class="nav-link">
  Gin
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/concurrent/" class="nav-link">
  go并发
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/standard/" class="nav-link">
  常用标准库
</a></li><li class="dropdown-item"><!----> <a href="/blog/go/skills/" class="nav-link">
  技巧篇
</a></li></ul></div></div><div class="nav-item"><a href="/blog/docker/" class="nav-link">
  docker
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue" class="dropdown-title"><span class="title">vue</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue" class="mobile-dropdown-title"><span class="title">vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/vue/base/" class="nav-link">
  vue基础
</a></li><li class="dropdown-item"><!----> <a href="/blog/vue/assembly/" class="nav-link">
  组件化编程
</a></li><li class="dropdown-item"><!----> <a href="/blog/vue/problem/" class="nav-link">
  problem
</a></li><li class="dropdown-item"><!----> <a href="/blog/vue/uniApp/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  uniApp
</a></li></ul></div></div><div class="nav-item"><a href="/blog/tool/" class="nav-link">
  tool
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span></span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/blog/vue/uniApp/" aria-current="page" class="active sidebar-link">uni-app</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#node" class="sidebar-link">node</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#安装" class="sidebar-link">安装</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#查看node版本" class="sidebar-link">查看node版本</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#缓存目录移动安装目录-统一管理" class="sidebar-link">缓存目录移动安装目录, 统一管理</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#npm包管理器" class="sidebar-link">npm包管理器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#查看npm当前版本" class="sidebar-link">查看npm当前版本</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#更新npm到最新版本" class="sidebar-link">更新npm到最新版本</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#更新npm到指定版本" class="sidebar-link">更新npm到指定版本</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#查看当前npm源" class="sidebar-link">查看当前npm源</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#设置npm源为淘宝源" class="sidebar-link">设置npm源为淘宝源</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#依赖包安装" class="sidebar-link">依赖包安装</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#npm安装报错处理" class="sidebar-link">npm安装报错处理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#cb-apply-is-not-a-function" class="sidebar-link">cb.apply is not a function</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#安装vue-cli-4-x-报错-4048" class="sidebar-link">安装Vue CLI 4.x 报错-4048</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#webstorm无法加载vue命令" class="sidebar-link">webstorm无法加载vue命令</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#hbuilderx快捷键" class="sidebar-link">HBuilderX快捷键</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#项目创建" class="sidebar-link">项目创建</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#目录结构" class="sidebar-link">目录结构</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#gitignore文件" class="sidebar-link">.gitignore文件</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#常用指令或语法" class="sidebar-link">常用指令或语法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#v-bind属性绑定指令" class="sidebar-link">v-bind属性绑定指令</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#模板中访问data中定义的变量" class="sidebar-link">模板中访问data中定义的变量</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#v-on事件绑定指令" class="sidebar-link">v-on事件绑定指令</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#v-model数据绑定指令" class="sidebar-link">v-model数据绑定指令</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#条件判断" class="sidebar-link">条件判断</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#block空标签" class="sidebar-link">block空标签</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#v-for遍历指令" class="sidebar-link">v-for遍历指令</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#基础组件" class="sidebar-link">基础组件</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#自定义组件" class="sidebar-link">自定义组件</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#常用api" class="sidebar-link">常用API</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#条件编译" class="sidebar-link">条件编译</a></li><li class="sidebar-sub-header"><a href="/blog/vue/uniApp/#页面布局" class="sidebar-link">页面布局</a></li></ul></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="uni-app"><a href="#uni-app" class="header-anchor">#</a> uni-app</h1> <h2 id="node"><a href="#node" class="header-anchor">#</a> node</h2> <p><a href="https://www.cnblogs.com/lgx5/p/10732016.html" target="_blank" rel="noopener noreferrer">安装参考<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> ; 安装到指定目录或者默认目录都可以, 一般都会指定一个安装目录</p> <h3 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h3> <ul><li><p><a href="https://nodejs.org/zh-cn/" target="_blank" rel="noopener noreferrer">下载地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>下载安装包 =&gt; 双击 =&gt; 选择指定目录 <code>E:\nodejs</code> =&gt; 下一步下一步安装</p></li> <li><p>默认会自动加到path环境变量中</p></li> <li><p>查看当前环境变量</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>echo <span class="token operator">%</span><span class="token constant">PATH</span><span class="token operator">%</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li></ul> <h3 id="查看node版本"><a href="#查看node版本" class="header-anchor">#</a> 查看node版本</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>node <span class="token operator">-</span>v
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="缓存目录移动安装目录-统一管理"><a href="#缓存目录移动安装目录-统一管理" class="header-anchor">#</a> 缓存目录移动安装目录, 统一管理</h3> <p>默认缓存目录在c盘</p> <ul><li><p>新建目录 <code>node_cache</code>和 <code>node_globa</code></p></li> <li><p>执行命令</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 修改本地仓库, 修改之后查看npm仓库:  npm list -global</span>
npm config <span class="token keyword">set</span> prefix <span class="token string">&quot;E:\nodejs\node_global&quot;</span>
<span class="token comment">// 修改缓存位置</span>
npm config <span class="token keyword">set</span> cache <span class="token string">&quot;E:\nodejs\node_cache&quot;</span>  
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></li></ul> <h2 id="npm包管理器"><a href="#npm包管理器" class="header-anchor">#</a> npm包管理器</h2> <p>node安装之后, npn顺带也安装好了, 但可能不是最新版本</p> <h3 id="查看npm当前版本"><a href="#查看npm当前版本" class="header-anchor">#</a> 查看npm当前版本</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>npm <span class="token operator">-</span>v
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="更新npm到最新版本"><a href="#更新npm到最新版本" class="header-anchor">#</a> 更新npm到最新版本</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>npm install <span class="token operator">-</span>g npm
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="更新npm到指定版本"><a href="#更新npm到指定版本" class="header-anchor">#</a> 更新npm到指定版本</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>npm <span class="token operator">-</span>g install npm@<span class="token number">6.8</span><span class="token number">.0</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="查看当前npm源"><a href="#查看当前npm源" class="header-anchor">#</a> 查看当前npm源</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>npm config <span class="token keyword">get</span> registry
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="设置npm源为淘宝源"><a href="#设置npm源为淘宝源" class="header-anchor">#</a> 设置npm源为淘宝源</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>npm config <span class="token keyword">set</span> registry https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>registry<span class="token punctuation">.</span>npm<span class="token punctuation">.</span>taobao<span class="token punctuation">.</span>org
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="依赖包安装"><a href="#依赖包安装" class="header-anchor">#</a> 依赖包安装</h3> <p><font style="color:blue;">安装单独的依赖包:</font></p> <ul><li><p><code>npm install &lt;packageName&gt;</code></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>npm install <span class="token operator">--</span>save js<span class="token operator">-</span>base64

<span class="token literal-property property">注解</span><span class="token operator">:</span>
<span class="token operator">+</span>	<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">--save</span><span class="token template-punctuation string">`</span></span> 等同于<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">-S</span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">,</span> 经常使用<span class="token punctuation">,</span> 安装依赖的同时<span class="token punctuation">,</span> 可以把依赖保存在<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">package.json</span><span class="token template-punctuation string">`</span></span>文件中<span class="token punctuation">;</span>
<span class="token operator">+</span>	<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">-S</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">--save</span><span class="token template-punctuation string">`</span></span> 安装包信息将加入到dependencies（生产阶段的依赖<span class="token punctuation">,</span>也就是项目运行时的依赖，就是程序上线后仍然需要依赖）
<span class="token operator">+</span>	<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">--save-dev</span><span class="token template-punctuation string">`</span></span> 等同于<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">-D</span><span class="token template-punctuation string">`</span></span>安装包信息将加入到devDependencies<span class="token punctuation">,</span> 开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作用
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div></li> <li><p><code>npm install &lt;packageName&gt; -g</code></p> <div class="language- line-numbers-mode"><pre class="language-text"><code>npm install    安装
&lt;packageName&gt;  模块名字
-g  这个参数意思是安装到gloabl目录下, 也就是上面说设置的E:\nodejs\node_global里
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li></ul> <p><font style="color:blue;">批量安装package.json文件中依赖</font></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>npm install
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><font style="color:blue;">常用的依赖包</font></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>npm install <span class="token operator">--</span>save base<span class="token operator">-</span><span class="token number">64</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="npm安装报错处理"><a href="#npm安装报错处理" class="header-anchor">#</a> npm安装报错处理</h2> <h3 id="cb-apply-is-not-a-function"><a href="#cb-apply-is-not-a-function" class="header-anchor">#</a> cb.apply is not a function</h3> <p>操作: 先把npm更新到指定版本6.8.0; 然后再更新到最新</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>npm <span class="token constant">WARN</span> npm You can find the latest version at https<span class="token operator">:</span><span class="token operator">/</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">nodejs.org</span><span class="token regex-delimiter">/</span></span>
npm <span class="token constant">ERR</span><span class="token operator">!</span> cb<span class="token punctuation">.</span>apply is not a <span class="token keyword">function</span>

npm <span class="token constant">ERR</span><span class="token operator">!</span> <span class="token constant">A</span> complete log <span class="token keyword">of</span> <span class="token keyword">this</span> run can be found <span class="token keyword">in</span><span class="token operator">:</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span>     <span class="token constant">C</span><span class="token operator">:</span>\Users\Admin\AppData\Roaming\npm<span class="token operator">-</span>cache\_logs\<span class="token number">2021</span><span class="token operator">-</span><span class="token number">09</span><span class="token operator">-</span>01T03_01_26_898Z<span class="token operator">-</span>debug<span class="token punctuation">.</span>log
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>处理:</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>win <span class="token operator">+</span> r 打开运行，输入<span class="token operator">%</span>appdata<span class="token operator">%</span>
删除 npm 和 npm<span class="token operator">-</span>cache 文件夹
执行npm cache clean <span class="token operator">--</span>force命令
再次执行npm更新到最新版本的命令npm install <span class="token operator">-</span>g npm
此时应该就可以了。如果还不行，就执行卸载Node<span class="token punctuation">.</span>js重新安装
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="安装vue-cli-4-x-报错-4048"><a href="#安装vue-cli-4-x-报错-4048" class="header-anchor">#</a> 安装Vue CLI 4.x 报错-4048</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token constant">C</span><span class="token operator">:</span>\Users\Admin<span class="token operator">&gt;</span>npm install <span class="token operator">-</span>g @vue<span class="token operator">/</span>cli
npm <span class="token constant">ERR</span><span class="token operator">!</span> code <span class="token constant">EPERM</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span> syscall mkdir
npm <span class="token constant">ERR</span><span class="token operator">!</span> path <span class="token constant">E</span><span class="token operator">:</span>\nodejs\node_cache\_cacache
npm <span class="token constant">ERR</span><span class="token operator">!</span> errno <span class="token operator">-</span><span class="token number">4048</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span> Error<span class="token operator">:</span> <span class="token constant">EPERM</span><span class="token operator">:</span> operation not permitted<span class="token punctuation">,</span> mkdir <span class="token string">'E:\nodejs\node_cache\_cacache'</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span>  <span class="token punctuation">[</span>OperationalError<span class="token operator">:</span> <span class="token constant">EPERM</span><span class="token operator">:</span> operation not permitted<span class="token punctuation">,</span> mkdir <span class="token string">'E:\nodejs\node_cache\_cacache'</span><span class="token punctuation">]</span> <span class="token punctuation">{</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span>   cause<span class="token operator">:</span> <span class="token punctuation">[</span>Error<span class="token operator">:</span> <span class="token constant">EPERM</span><span class="token operator">:</span> operation not permitted<span class="token punctuation">,</span> mkdir <span class="token string">'E:\nodejs\node_cache\_cacache'</span><span class="token punctuation">]</span> <span class="token punctuation">{</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span>     errno<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">4048</span><span class="token punctuation">,</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span>     code<span class="token operator">:</span> <span class="token string">'EPERM'</span><span class="token punctuation">,</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span>     syscall<span class="token operator">:</span> <span class="token string">'mkdir'</span><span class="token punctuation">,</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span>     path<span class="token operator">:</span> <span class="token string">'E:\\nodejs\\node_cache\\_cacache'</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span>   <span class="token punctuation">}</span><span class="token punctuation">,</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span>   isOperational<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span>   errno<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">4048</span><span class="token punctuation">,</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span>   code<span class="token operator">:</span> <span class="token string">'EPERM'</span><span class="token punctuation">,</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span>   syscall<span class="token operator">:</span> <span class="token string">'mkdir'</span><span class="token punctuation">,</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span>   path<span class="token operator">:</span> <span class="token string">'E:\\nodejs\\node_cache\\_cacache'</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span> <span class="token punctuation">}</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span> The operation was rejected by your operating system<span class="token punctuation">.</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span> It's possible that the file was already <span class="token keyword">in</span> <span class="token function">use</span> <span class="token punctuation">(</span>by a text editor or antivirus<span class="token punctuation">)</span><span class="token punctuation">,</span>
npm <span class="token constant">ERR</span><span class="token operator">!</span> or that you lack permissions to access it<span class="token punctuation">.</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p>处理:</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token constant">C</span><span class="token operator">:</span>\Users\Admin 目录下<span class="token punctuation">,</span> 删除文件<span class="token punctuation">.</span>npmrc和文件<span class="token punctuation">.</span>nrmrc
重新执行npm install <span class="token operator">-</span>g @vue<span class="token operator">/</span>cli安装成功
执行 vue <span class="token operator">-</span><span class="token constant">V</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>注意: 如果提示不是内部或外部的命令, 查看是否添加到环境变量了</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token constant">E</span><span class="token operator">:</span>\<span class="token operator">&gt;</span>vue <span class="token operator">-</span><span class="token constant">V</span>
@vue<span class="token operator">/</span>cli <span class="token number">4.5</span><span class="token number">.13</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="webstorm无法加载vue命令"><a href="#webstorm无法加载vue命令" class="header-anchor">#</a> webstorm无法加载vue命令</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token constant">PS</span> <span class="token constant">F</span><span class="token operator">:</span>\web\test<span class="token operator">&gt;</span> vue <span class="token operator">-</span><span class="token constant">V</span>
<span class="token literal-property property">vue</span> <span class="token operator">:</span> 无法加载文件 <span class="token constant">C</span><span class="token operator">:</span>\Users\Admin\AppData\Roaming\npm\vue<span class="token punctuation">.</span>ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https<span class="token operator">:</span><span class="token operator">/</span>go<span class="token punctuation">.</span>microsoft<span class="token punctuation">.</span>com<span class="token operator">/</span>fwlink<span class="token operator">/</span><span class="token operator">?</span>LinkID<span class="token operator">=</span><span class="token number">13517</span>
<span class="token number">0</span> 中的 about_Execution_Policies。
所在位置 行<span class="token operator">:</span><span class="token number">1</span> <span class="token literal-property property">字符</span><span class="token operator">:</span> <span class="token number">1</span>
<span class="token operator">+</span> vue <span class="token operator">-</span><span class="token constant">V</span>
<span class="token operator">+</span> <span class="token operator">~</span><span class="token operator">~</span><span class="token operator">~</span>
    <span class="token operator">+</span> CategoryInfo          <span class="token operator">:</span> SecurityError<span class="token operator">:</span> <span class="token punctuation">(</span><span class="token operator">:</span><span class="token punctuation">)</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>，PSSecurityException
    <span class="token operator">+</span> FullyQualifiedErrorId <span class="token operator">:</span> UnauthorizedAccess

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>处理:</p> <ul><li><p>管理员身份运行PowerShell（命令提示符，来源于Linux的命令提示符也叫Shell）</p></li> <li><p>执行：set-ExecutionPolicy RemoteSigned （签名或运行这些)</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>Windows PowerShell
<span class="token function">版权所有</span> <span class="token punctuation">(</span><span class="token constant">C</span><span class="token punctuation">)</span> Microsoft Corporation。保留所有权利。

尝试新的跨平台 PowerShell https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>aka<span class="token punctuation">.</span>ms<span class="token operator">/</span>pscore6

<span class="token constant">PS</span> <span class="token constant">C</span><span class="token operator">:</span>\Windows\system32<span class="token operator">&gt;</span> set<span class="token operator">-</span>ExecutionPolicy RemoteSigned

执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https<span class="token operator">:</span><span class="token operator">/</span>go<span class="token punctuation">.</span>microsoft<span class="token punctuation">.</span>com<span class="token operator">/</span>fwlink<span class="token operator">/</span><span class="token operator">?</span>LinkID<span class="token operator">=</span><span class="token number">135170</span>
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略<span class="token operator">?</span>
<span class="token punctuation">[</span><span class="token constant">Y</span><span class="token punctuation">]</span> <span class="token function">是</span><span class="token punctuation">(</span><span class="token constant">Y</span><span class="token punctuation">)</span>  <span class="token punctuation">[</span><span class="token constant">A</span><span class="token punctuation">]</span> <span class="token function">全是</span><span class="token punctuation">(</span><span class="token constant">A</span><span class="token punctuation">)</span>  <span class="token punctuation">[</span><span class="token constant">N</span><span class="token punctuation">]</span> <span class="token function">否</span><span class="token punctuation">(</span><span class="token constant">N</span><span class="token punctuation">)</span>  <span class="token punctuation">[</span><span class="token constant">L</span><span class="token punctuation">]</span> <span class="token function">全否</span><span class="token punctuation">(</span><span class="token constant">L</span><span class="token punctuation">)</span>  <span class="token punctuation">[</span><span class="token constant">S</span><span class="token punctuation">]</span> <span class="token function">暂停</span><span class="token punctuation">(</span><span class="token constant">S</span><span class="token punctuation">)</span>  <span class="token punctuation">[</span><span class="token operator">?</span><span class="token punctuation">]</span> <span class="token function">帮助</span> <span class="token punctuation">(</span>默认值为“<span class="token constant">N</span>”<span class="token punctuation">)</span><span class="token operator">:</span> y
<span class="token constant">PS</span> <span class="token constant">C</span><span class="token operator">:</span>\Windows\system32<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div></li> <li><p>如果不是这个问题, 查看vue是否加入环境变量</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>查看vue的npm仓库 <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">npm list -global</span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">,</span> 找到vue命令
把这个命令所在目录<span class="token punctuation">,</span> 加入到环境变量 <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">E:\nodejs\node_global</span><span class="token template-punctuation string">`</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></li></ul> <h2 id="hbuilderx快捷键"><a href="#hbuilderx快捷键" class="header-anchor">#</a> HBuilderX快捷键</h2> <ul><li><p>快速输出<code>console.log()</code></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>colg <span class="token operator">+</span> 回车
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p>删除整行内容</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Ctril <span class="token operator">+</span> d
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p>复制当前行到下一行</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Ctrl <span class="token operator">+</span> Shift <span class="token operator">+</span><span class="token constant">R</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p>当前行整行内容上移或下移</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Ctrl <span class="token operator">+</span> 方向键
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li></ul> <h2 id="项目创建"><a href="#项目创建" class="header-anchor">#</a> 项目创建</h2> <p><a href="https://uniapp.dcloud.io/quickstart-hx" target="_blank" rel="noopener noreferrer">项目创建参考<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><font style="color:blue;">HBuilderX 直接创建</font></p> <p>推荐使用这种方式创建;  选择<code>uni-app</code>, 模板选择默认即可</p> <p><font style="color:blue;">vue脚手架创建</font></p> <ul><li><p>检查vue-cli脚手架是否安装</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>vue <span class="token operator">-</span><span class="token constant">V</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li></ul> <p><font style="color:blue;">demo:</font></p> <p>当前目录下创建一个test文件夹, 安装到test文件夹下面</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>vue create <span class="token operator">-</span>p dcloud<span class="token operator">/</span>uni<span class="token operator">-</span>preset<span class="token operator">-</span>vue test
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>注意: vue脚手架创建的项目, 里面的<code>src</code>目录下的内容和HBuilderX创建的一样的, 直接把<code>src</code>目录下的内容拿过去是可以运行的</p> <h2 id="目录结构"><a href="#目录结构" class="header-anchor">#</a> 目录结构</h2> <ul><li><code>.hbuilderx</code>文件夹: 创建项目的时候没有这个文件夹, 是运行的时候产生的</li> <li><code>pages</code>目录: 存放页面的目录</li> <li><code>static</code>目录: 存放静态文件的目录,这个目录里面的内容不会被编译</li> <li><code>App.vue</code>: 应用入口文件, 和小程序app.js类似</li> <li><code>main.js</code>: 应用入口文件, 注册vue等</li> <li><code>manifest.json</code>: 项目的配置</li> <li><code>pages.json</code>: 页面相关的配置文件</li> <li><code>uni.scs</code>: 全局的一些配置, 可以定义一些变量, 全局都可以使</li> <li><code>common</code>文件夹: 自己新建的, 存放一些css, js, 以及一些公共的插件等</li> <li><code>components</code>文件夹: 自己新建的, 存放一些自定义的组</li> <li><code>store</code>文件夹: 自己新建的, vuex目录</li> <li><code>unpackage</code>目录: 编译后的文件存放目录, 没有编译则没有</li></ul> <h2 id="gitignore文件"><a href="#gitignore文件" class="header-anchor">#</a> .gitignore文件</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code># Windows
[Dd]esktop.ini
Thumbs.db
$RECYCLE.BIN/

# macOS
.DS_Store
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes

# Node.js
node_modules/
.hbuilderx/
unpackage/
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="常用指令或语法"><a href="#常用指令或语法" class="header-anchor">#</a> 常用指令或语法</h2> <h3 id="v-bind属性绑定指令"><a href="#v-bind属性绑定指令" class="header-anchor">#</a> v-bind属性绑定指令</h3> <p>可以简写为<code>:</code> , 属性绑定, 可以动态绑定data中的数据或者js表达式</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>msg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1+1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
	    开心就好
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
		<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">return</span> <span class="token punctuation">{</span>
				<span class="token literal-property property">msg</span><span class="token operator">:</span><span class="token string">'hello'</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="模板中访问data中定义的变量"><a href="#模板中访问data中定义的变量" class="header-anchor">#</a> 模板中访问data中定义的变量</h3> <p><font style="color:blue;">使用双花括号</font></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
	    {{msg}}
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
		<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">return</span> <span class="token punctuation">{</span>
				<span class="token literal-property property">msg</span><span class="token operator">:</span><span class="token string">'hello'</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="v-on事件绑定指令"><a href="#v-on事件绑定指令" class="header-anchor">#</a> v-on事件绑定指令</h3> <p>简写<code>@</code> 绑定事件</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>show<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点我一下<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
		<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">return</span> <span class="token punctuation">{</span>				
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
			<span class="token comment">// 里面写一些自定义函数</span>
			<span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
				console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'点击了按钮'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><ul><li>其中<code>v-on:click=&quot;show&quot;</code>可以简写为<code>@click=&quot;show&quot;</code></li> <li><code>methods</code> 里面写自定义函数</li></ul> <p><font style="color:blue;">事件渗透</font></p> <p>利用事件修饰符<code>.stop</code>阻止冒泡</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>		
		<span class="token comment">&lt;!-- 此时点击我是子集, 我是父级也会出来, 这个是常说的 `事件穿透`
		     只要子集加一个修饰符 `.stop`,就可以阻止事件穿透
		 --&gt;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
			我是父级
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@click.stop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
				我是子集
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>		
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
		<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">return</span> <span class="token punctuation">{</span>						
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>		
		    <span class="token function">c1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
				console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'我是父级'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			<span class="token function">c2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
				console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'我是子集'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>	
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><h3 id="v-model数据绑定指令"><a href="#v-model数据绑定指令" class="header-anchor">#</a> v-model数据绑定指令</h3> <p>数据的双向绑定</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>msg<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
		<span class="token comment">// 初始化数据, data是一个函数, return了一个对象</span>
		<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">return</span> <span class="token punctuation">{</span>
				<span class="token literal-property property">msg</span><span class="token operator">:</span><span class="token string">'hello'</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
				<span class="token keyword">this</span><span class="token punctuation">.</span>msg <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>msg <span class="token operator">+</span> <span class="token string">'中国'</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">2000</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><ul><li>案例中: <code>onLoad</code>中表示,加载这个页面, 过2秒修改msg的值为后面拼接中国</li> <li><code>&lt;input v-model=&quot;msg&quot; type=&quot;text&quot; value=&quot;&quot; /&gt;</code>表示输入框的值和下面的data里面msg绑定在一起,进行双向绑定</li></ul> <h3 id="条件判断"><a href="#条件判断" class="header-anchor">#</a> 条件判断</h3> <p><font style="color:blue;">v-if</font></p> <p>条件判断, 决定某个内容或者区块是否 挂载, <code>没有挂载, 标签都不会存在</code></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span>  <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flag==<span class="token punctuation">'</span>vue<span class="token punctuation">'</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>开心就好<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flag==<span class="token punctuation">'</span>html<span class="token punctuation">'</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我不开心了<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">v-else</span><span class="token punctuation">&gt;</span></span>开心了<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><font style="color:blue;">v-show</font></p> <p>条件判断, 是否显示, 用法同<code>v-if</code>, 但不显示的标签是存在的, 只是隐藏了</p> <p><font style="color:blue;">三元运算符</font></p> <p>适合比较简单的条件</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{flag ? &quot;显示&quot; : &quot;隐藏&quot;}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="block空标签"><a href="#block空标签" class="header-anchor">#</a> block空标签</h3> <p>不产生额外标签, 适合用来做条件判断和循环最外层</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flag<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>开心就好<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="v-for遍历指令"><a href="#v-for遍历指令" class="header-anchor">#</a> v-for遍历指令</h3> <p><font style="color:blue;"> 语法: <code>v-for=&quot;(item,index) in xxx&quot; :key=&quot;yyy&quot;</code> key要保证唯一性</font>;</p> <p>其中<code>item</code>是数组或者对象的一个元素, <code>index</code>是这个元素的索引;都是形参, 可以自己定义这两个名称</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token comment">&lt;!-- 
	空标签遍历, 列表会少一层结构
 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item,index) in arr<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}} : {{index}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value,key in person<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{value}} : {{key}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(p,index) in persons<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>姓名: {{p.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>年龄: {{p.age}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>		
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
		<span class="token comment">// 初始化数据, data是一个函数, return了一个对象</span>
		<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">return</span> <span class="token punctuation">{</span>
			<span class="token literal-property property">arr</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
			<span class="token literal-property property">person</span><span class="token operator">:</span> <span class="token punctuation">{</span>
				<span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'小明'</span><span class="token punctuation">,</span>
				<span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">18</span><span class="token punctuation">,</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			<span class="token literal-property property">msg</span><span class="token operator">:</span><span class="token string">'hello'</span><span class="token punctuation">,</span>
			<span class="token literal-property property">code</span><span class="token operator">:</span><span class="token string">''</span>	<span class="token punctuation">,</span>
			<span class="token literal-property property">persons</span><span class="token operator">:</span><span class="token punctuation">[</span>
				<span class="token punctuation">{</span>
					<span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'小明'</span><span class="token punctuation">,</span>
					<span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">18</span><span class="token punctuation">,</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token punctuation">{</span>
					<span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'小红'</span><span class="token punctuation">,</span>
					<span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">20</span><span class="token punctuation">,</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				
			<span class="token punctuation">]</span>		
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
				<span class="token keyword">this</span><span class="token punctuation">.</span>msg <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>msg <span class="token operator">+</span> <span class="token string">'中国'</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">2000</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br></div></div><h3 id="基础组件"><a href="#基础组件" class="header-anchor">#</a> 基础组件</h3> <ul><li><font style="color:blue;">view</font>是uni提供的基础组件, view有点类似html中提供的div</li> <li><font style="color:blue;">text</font>也是uni提供的组件, 类似html中提供的span</li> <li>使用一个组件, 一般关注组件的作用, 属性 和事件三个方面, 文档里面组件部分说得都很详细</li> <li><font style="color:blue;">scroll组件demo:</font></li></ul> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>		
		<span class="token comment">&lt;!--  @scroll 是组件自带的事件 --&gt;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scroll<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:scroll-y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@scroll</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scroll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>i in 100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>11<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
		<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">return</span> <span class="token punctuation">{</span>
				<span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">1</span>				
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>			
			<span class="token function">scroll</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
				console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
	<span class="token comment">/* rpx 小程序 */</span>
	<span class="token selector">.scroll</span><span class="token punctuation">{</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 400rpx<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><h3 id="自定义组件"><a href="#自定义组件" class="header-anchor">#</a> 自定义组件</h3> <p>使用<a href="https://uniapp.dcloud.io/collocation/pages?id=easycom" target="_blank" rel="noopener noreferrer">easycom规范<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, 可以直接使用组件</p> <ul><li>父组件向子组件传递数据可以通过<code>props</code></li> <li>子组件向父组件传递数据可以通过自定义事件, 父组件自定义事件, 子组件触发父组件定义的事件, 并传递数据</li> <li>子组件可以定义插槽<code>slot</code>, 让父组件自定义要显示的内容</li></ul> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token comment">&lt;!-- 子组件--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
	<span class="token comment">&lt;!-- 第三步: 绑定组件属性 --&gt;</span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span>
	 <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{background: color,fontSize: size}<span class="token punctuation">&quot;</span></span>
	 <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handClick<span class="token punctuation">&quot;</span></span>	 
	 <span class="token punctuation">&gt;</span></span>
	 <span class="token comment">&lt;!--  引入插槽, 填充占位 --&gt;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
		<span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&quot;card&quot;</span><span class="token punctuation">,</span>
		<span class="token comment">// 第二步: 接收组件传过来的参数</span>
		<span class="token literal-property property">props</span><span class="token operator">:</span><span class="token punctuation">{</span>
			<span class="token literal-property property">color</span><span class="token operator">:</span><span class="token punctuation">{</span>
				<span class="token literal-property property">type</span><span class="token operator">:</span>String<span class="token punctuation">,</span> <span class="token comment">//类型字符串</span>
				<span class="token keyword">default</span><span class="token operator">:</span><span class="token string">'white'</span> <span class="token comment">// 不传默认白色</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			<span class="token literal-property property">size</span><span class="token operator">:</span><span class="token punctuation">{</span>
				<span class="token literal-property property">type</span><span class="token operator">:</span>String<span class="token punctuation">,</span> <span class="token comment">//类型字符串</span>
				<span class="token keyword">default</span><span class="token operator">:</span><span class="token string">'14rpx'</span> <span class="token comment">// 不传默认白色</span>
			<span class="token punctuation">}</span>			

		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">return</span> <span class="token punctuation">{</span>
				
			<span class="token punctuation">}</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{</span>
			<span class="token function">handClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
				console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'点击了自定义组件'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token comment">// 子组件去触发父组件的自定义函数myClick, 从而向父组件传输数据</span>
				<span class="token comment">// this.$emit 第二个参数就是子组件传给父组件的方法数据</span>
				<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'myClick'</span><span class="token punctuation">,</span><span class="token string">'这个数据来自子组件'</span><span class="token punctuation">)</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br></div></div><div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token comment">&lt;!-- 父组件 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>新問列表<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
		<span class="token comment">&lt;!-- 向自定义组件传数据, 第一步, 使用组件的地方定义一个属性, 第二步, 去组件中用props接收,第三步, 在组件页面中绑定;可以传多个属性 --&gt;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>card</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>red<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>红色的<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>card</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>card</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>blue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>蓝色的<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>card</span><span class="token punctuation">&gt;</span></span>
		<span class="token comment">&lt;!-- 组件不仅可以传属性, 还可以传事件方法,用于子组件向父组件传值 --&gt;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>card</span> <span class="token attr-name">@myClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>myNewClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>默认的<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>card</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
		<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">return</span> <span class="token punctuation">{</span>
				
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
			<span class="token function">myNewClick</span><span class="token punctuation">(</span><span class="token parameter">msg</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
				console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'我是父组件的自定义事件:'</span> <span class="token operator">+</span> msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>			
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">

</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><h3 id="常用api"><a href="#常用api" class="header-anchor">#</a> 常用API</h3> <ul><li><a href="https://uniapp.dcloud.io/api/ui/prompt?id=showtoast" target="_blank" rel="noopener noreferrer">界面交互<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://uniapp.dcloud.io/api/router?id=navigateto" target="_blank" rel="noopener noreferrer">路由和页面跳转<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code>onLoad() {
    // 界面交互反馈
    uni.showToast({
   	 	icon:&quot;loading&quot;,
    	title:&quot;加载中&quot;,
    	// 持续时间, 2秒
    	duration:2000 
    })
    // 3秒之后跳转首页
    // 路由和页面跳珠
    setTimeout(()=&gt;{
   	 		uni.navigateTo({
    		url:&quot;../about/about&quot;
    	})
    },3000)
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="条件编译"><a href="#条件编译" class="header-anchor">#</a> 条件编译</h3> <p><a href="https://uniapp.dcloud.io/platform?id=%e8%b7%a8%e7%ab%af%e5%85%bc%e5%ae%b9" target="_blank" rel="noopener noreferrer">跨平台条件编译<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="页面布局"><a href="#页面布局" class="header-anchor">#</a> 页面布局</h3> <p>和传统的h5开发一样, 就是用<code>view</code>替换了<code>div</code>; 用<code>text</code>替换了<code>span</code>, 要熟悉常用分组件, 以免自己去自定义</p> <p><a href="https://uniapp.dcloud.io/component/README" target="_blank" rel="noopener noreferrer">常用内置组件<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><font style="color:blue;">最外层之后一个根元素, 但不限于是<code>view</code></font></p> <div class="language-view line-numbers-mode"><pre class="language-text"><code>&lt;template&gt;
	&lt;view&gt;
		//只有一个根元素, 两个就会报错
	&lt;/view&gt;
&lt;/template&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><font style="color:blue;">页面布局尽量使用 flex 布局, 少用定位</font></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">3/20/2022, 10:49:59 PM</span></div></footer> <!----> </main></div><div class="global-ui"><!----><!----><!----></div></div>
    <script src="/blog/assets/js/app.160d1732.js" defer></script><script src="/blog/assets/js/2.553eb4dc.js" defer></script><script src="/blog/assets/js/32.f6ddf561.js" defer></script><script src="/blog/assets/js/3.4c6b6694.js" defer></script>
  </body>
</html>
